<template>
	<view class="home_container">
		<view class="home_box">
			<view class="top_img_box">
				<image :src="registerBannerImg" mode="widthFix" class="top_img"></image>
			</view>
			<view class="bgc_img_all">
				<view class="bgc_img_box">
					<image :src="bgcImg" mode="" class="bgc_img"></image>
				</view>

				<view class="form_box">
					<view class="form_all">
						<view class="form_img_box">
							<image :src="registerImg" mode="widthFix" class="form_img"></image>
						</view>

						<view class="form_input_box">
							<!-- <view class="input_box">
								<u-input v-model="usernameValue" :border="false" :clearable="false" maxlength="11"
									placeholder="请输入用户名"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->
							<view class="input_box">
								<u-input v-model="phoneValue" type="number" :border="false" :clearable="false"
									maxlength="11" placeholder="请输入手机号"
									placeholder-style="font-size: 26rpx;font-family: all-font;font-weight: 400;color: #808080;" />
							</view>

							<view class="input_code_box">
								<view class="">
									<u-input v-model="codeValue" type="number" :border="false" :clearable="false"
										placeholder="请输入验证码"
										placeholder-style="font-size: 26rpx;font-family: all-font;font-weight: 400;color: #808080;" />
								</view>
								<view class="code_title" @click="sendCodeBtn">
									{{ send ? '获取验证码' : second + 's重新发送' }}
								</view>
							</view>

							<view class="input_box">
								<u-input v-model="passwordValue" :border="false" :clearable="false" placeholder="请输入密码"
									placeholder-style="font-size: 26rpx;font-family: all-font;font-weight: 400;color: #808080;" />
							</view>

							<!-- <view class="input_box">
								<u-input v-model="surePasswordValue" :border="false" :clearable="false"
									placeholder="请确认密码"
									placeholder-style="font-size: 26rpx;font-family: Source Han Sans CN;font-weight: 400;color: #808080;" />
							</view> -->

							<view class="register_btn_box" @click="handlerRegister">
								注 册
							</view>
							<view class="login_btn_box" @click="handleLogin" style="margin-top: 20rpx;">
								已有账号，去登录
							</view>

							<view class="register_read_box">
								<view class="register_read_all">
									<view class="left_box">
										<!-- <image src="/static/icon-checked.png" mode="" class="left_img"></image> -->
										<checkbox-group @change="handleChange">
											<label>
												<checkbox value="checkStatusValue" style="transform:scale(0.7)"
													:checked="checkStatus" />点击"注册"按钮标识您同意
											</label>
											<span class="left_read_title" @click="handleCheckRead('0')">《用户注册协议》</span>
											<span class="left_read_title" @click="handleCheckRead('1')">《隐私协议》</span>
										</checkbox-group>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 用户服务协议及隐私政策 -->
			<agreement ref="refAgreement" :agreementType="agreementType"></agreement>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '@/utils/common.js'
	import parseQueryString from '@/utils/interceptUrl.js'
	import Agreement from '@/pages/login/components/agreement.vue'
	export default {
		components: {
			Agreement
		},
		data() {
			return {
				registerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/668368b7334db_1719888055.png',
				phoneValue: '',
				codeValue: '',
				passwordValue: '',
				surePasswordValue: '',
				send: true, //验证码按钮状态
				second: 0, //显示倒计时
				s: 60, //默认倒计时
				agentId: '',
				pid: '',
				ppid: '',
				registerBannerImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/xcx_static/65fe2d539fdb7_1711156563.png',
				sceneNumber: '',
				sceneObj: {},
				usernameValue: '',
				checkStatus: false,
				checkStatusValue: '',
				readList: {
					name: "点击'注册'按钮标识您同意",
					checked: false,
				},
				agreementType: '',
				uuid: '',
				registerObj: {
					phone: '',
					code: '',
					password: '',
					invitationCode: ''
				},
				bgcImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66c697ca62ae9_1724291018.png'
			}
		},
		onShow() {
			uni.hideHomeButton()
		},
		onLoad(options) {
			// if (options) {
			// 	const that = this
			// 	const scene = decodeURIComponent(options.scene)
			// 	if (scene) {
			// 		that.sceneNumber = scene
			// 		that.getMiniProgramScene()
			// 	} else {
			// 		this.sceneObj = options
			// 	}
			// }
			if (options.scene) {
				const scene = decodeURIComponent(options.scene)
				this.sceneNumber = scene
				this.getMiniProgramScene()
			} else {
				this.sceneObj = options
				// this.sceneObj.agent_id = options.agent_id ? options.agent_id : ''
				// this.sceneObj.pid = options.pid ? options.pid : ''
				// if (options.ppid == undefined) {
				// 	this.sceneObj.ppid = ''

				// } else {
				// 	this.sceneObj.ppid = options.ppid
				// }
			}
		},
		methods: {
			handleChange(e) {
				this.checkStatusValue = e.detail.value[0]
			},

			// 查看我已阅读
			handleCheckRead(val) {
				this.agreementType = val
				this.$refs.refAgreement.isShowUserAgreement = true
			},

			// 去登录
			handleLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},

			// 查询微信小程序场景值接口
			getMiniProgramScene() {
				uni.request({
					url: 'https://saler.jkcae.com/app/getMiniProgramScene?id=' + this.sceneNumber,
					method: 'GET',
					success: res => {
						if (res.data.code == 1) {
							let sceneDetail = parseQueryString(res.data.data)
							this.sceneObj = sceneDetail
							uni.setStorageSync('userSceneObj', sceneDetail)
						} else {
							uni.showToast({
								title: '查询失败',
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 微信登录接口-code
			xcxGetUserInfo(val, phone) {
				this.$request('/xcxGetUserInfo', {
					code: val,
					phone: phone
				}, 'GET').then(res => {
					uni.setStorageSync('userWxOpenid', res.data)
				})
			},

			// 获取验证码接口
			getCode() {
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserGetSmsCode',
					method: 'POST',
					data: {
						phone: this.phoneValue
					},
					success: res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 注册接口
			getRegister() {
				const that = this
				let userInfoObj = uni.getStorageSync('userSceneObj')
				uni.request({
					url: 'https://saler.jkcae.com/app/fxuserRegisterPassword',
					method: 'POST',
					data: {
						// username: this.usernameValue,
						phone: this.phoneValue,
						password: this.passwordValue,
						code: this.codeValue,
						agent_id: this.sceneObj.agent_id ? this.sceneObj.agent_id : userInfoObj.agent_id,
						pid: this.sceneObj.pid ? this.sceneObj.pid : userInfoObj.pid,
						ppid: this.sceneObj.ppid ? this.sceneObj.ppid : userInfoObj.ppid,
						type: 'zhaomu',
						road: 'wx'
					},
					success: res => {
						if (res.data.code == 1) {
							uni.setStorageSync('h5-token', res.data.data.token)
							uni.setStorageSync('userInfo', res.data.data.userInfo)
							uni.removeStorageSync('userSceneObj')
							uni.login({
								provider: 'weixin', //使用微信登录
								success: function(loginRes) {
									that.xcxGetUserInfo(loginRes.code, that.phoneValue)
								}
							});
							uni.showToast({
								title: '注册成功',
								icon: 'none',
								success: res => {
									setTimeout(() => {
										this.phoneValue = ''
										this.codeValue = ''
										this.passwordValue = ''
										this.surePasswordValue = ''
										uni.switchTab({
											url: '/pages/index/index'
										})
									}, 1200)

								}
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			//验证码按钮点击
			sendCodeBtn() {
				let that = this;
				//防连点
				if (!that.send) {
					return false
				}
				this.send = false;
				that.time();
				if (this.phoneValue == '') {
					this.second = this.s
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					})
					return;
				} else {
					that.getCode()
				}
			},

			//倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(() => {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval)
					} else {
						that.second--
					}
				}, 1000)
			},

			// 注册
			handlerRegister: Throttle(function() {
				// if (this.usernameValue == '') {
				// 	uni.showToast({
				// 		title: '请输入用户名',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else
				if (this.phoneValue == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (this.codeValue == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				} else if (this.passwordValue.length < 6) {
					uni.showToast({
						title: '密码不可以少于6位',
						icon: 'none'
					})
					return
				} else if (this.checkStatusValue == '') {
					uni.showToast({
						title: '请勾选相关协议',
						icon: 'none'
					})
					return
				}
				// else if (this.surePasswordValue == '') {
				// 	uni.showToast({
				// 		title: '请确认密码',
				// 		icon: 'none'
				// 	})
				// 	return
				// } 
				// else if (this.surePasswordValue.length !== 6) {
				// 	uni.showToast({
				// 		title: '确认密码不可以少于6位',
				// 		icon: 'none'
				// 	})
				// 	return
				// }



				// if (this.passwordValue != this.surePasswordValue) {
				// 	uni.showToast({
				// 		title: '两次输入的密码不一致',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.getRegister()
			}, 5000)
		}
	}
</script>
<style>
	body {
		background: #9acffc;
	}
</style>
<style lang="scss" scoped>
	.home_container {

		.home_box {

			.top_img_box {
				width: 100%;

				.top_img {
					width: 100%;
					height: 100%;
				}
			}

			.bgc_img_all {
				padding-bottom: 30rpx;

				.bgc_img_box {
					width: 100%;

					.bgc_img {
						width: 100%;
						height: 100%;
					}
				}

				.form_box {
					position: relative;
					display: flex;
					justify-content: center;

					.form_all {
						// width: 619rpx;
						// height: 685rpx;
						background: #FFFFFF;
						box-shadow: 0px 2rpx 9rpx 0px rgba(66, 158, 238, 0.72);
						border-radius: 12rpx;
						padding: 0 30rpx 30rpx;

						.form_img_box {
							position: absolute;
							top: -34rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 326rpx;
							height: 66rpx;

							.form_img {
								width: 100%;
								height: 100%;
							}
						}

						.form_input_box {
							display: flex;
							flex-direction: column;
							margin-top: 67rpx;

							.input_box {
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding-left: 40rpx;
								margin-bottom: 37rpx;
							}

							.input_code_box {
								display: flex;
								align-items: center;
								justify-content: space-between;
								width: 560rpx;
								height: 68rpx;
								background: #F5F5F5;
								border: 1px solid #F5F5F5;
								border-radius: 34rpx;
								padding: 0 30rpx 0 40rpx;
								margin-bottom: 37rpx;

								.code_title {
									font-size: 22rpx;
									font-family: all-font;
									font-weight: 400;
									color: #499AFF;
								}
							}

							.register_tip_box {
								display: flex;
								justify-content: flex-end;
								padding-bottom: 30rpx;

								.forget_title {
									font-size: 22rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #ccc;
								}

								.register_tip {
									font-size: 22rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									color: #3488FE;
								}
							}

							.register_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #3C91FF, #B5E5FE);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: all-font;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
							}

							.login_btn_box {
								width: 560rpx;
								height: 70rpx;
								background: linear-gradient(185deg, #F4271C, #FB8377);
								border-radius: 35rpx;
								font-size: 34rpx;
								font-family: all-font;
								font-weight: 500;
								color: #FFFFFF;
								text-align: center;
								line-height: 70rpx;
							}

							.register_read_box {
								width: 471rpx;
								padding-top: 30rpx;

								.register_read_all {
									display: flex;

									.left_box {
										font-size: 24rpx;
										font-family: all-font;

										.left_read_title {
											color: #73b5ff;
											font-size: 24rpx;
										}
									}

									.right_box {
										width: 90%;
										font-size: 21rpx;
										font-family: Source Han Sans CN;
										font-weight: 400;
										color: #499AFF;
									}
								}


							}
						}
					}
				}
			}
		}
	}
</style>